<template>
    <div class="container">
        <div id="main" style="height: 350px; width: 400px;">
            <v-chart :option="option" class="chart"></v-chart>
        </div>
    </div>

    <div class="bg"></div>
</template>

<script setup>
import { getPeople } from '@/models/getPeople';
import { onMounted, ref } from 'vue';
const people = ref([])
const peopleInfo = ref([])
const option = ref()
onMounted(async () => {
    const res = await getPeople()
    people.value = res.data.features
    people.value.forEach(item => {
        peopleInfo.value.push({
            name: item.properties.name,
            value: item.properties.people
        })
    })
    option.value = {
        title: {
            show: 'true',
        },
        tooltip: {
            trigger: 'item',
            formatter: (params) => {
                const res = params.name + '<br/>' + '人口数量 :'  +' '+ params.marker+ params.data.value
                return res
            }
        },
        legend: {
            width: 350,
            top: '0%',
            right: '0%',
            type: 'scroll',
            pageIconColor: '#fff',
            pageIconInactiveColor: '#999',
            pageButtonPosition: 'end',
            textStyle: {  // 添加textStyle字段设置字体样式
                color: 'white'  // 设置字体颜色为蓝色
            },
            pageTextStyle: {
                color: '#fff'
            }
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: peopleInfo.value
            }
        ]
    };
})
</script>

<style scoped lang="scss">
.container {
    background: url('/src/assets/大屏image素材/卡片-框/dataBg.png');
    width: 450px;
    height: 400px;
    position: fixed;
    top: 15%;
    right: 5%;
    z-index: 2003;

    #main {
        z-index: 2003;
    }

    .chart {
        margin-top: 70px;
        margin-left: 50px;
    }


}

.bg {

    background: url('/src/assets/大屏image素材/数据边框背景/jt.png') center center no-repeat;
    /* 居中并且不重复 */
    background-size: contain;
    /* 调整背景图片大小以适应容器 */
    position: fixed;
    top: 180px;
    right: 120px;
    z-index: 1000;
    width: 310px;
    height: 350px;
}
</style>
